<template>
  <FireWork/>
  <el-container>
    <el-header>
      <el-row class="top-bar">
        <el-col :span="6">
          <div class="grid-content"/>
          <a @click="gotoHomePage" style="color: black;cursor: pointer;">
            首页
          </a>
        </el-col>
        <el-col :span="6">
          <div class="grid-content"/>
          <a @click="goToNewsPage" style="color: black;cursor: pointer;">新闻</a>
        </el-col>
        <el-col :span="6">
          <div class="grid-content"/>
          <a @click="goToAddArticlePage" style="color: black;cursor: pointer;">发布文章</a>
        </el-col>
        <el-col :span="6">
          <div class="grid-content"/>
          <Avatar/>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="20%" style="margin-top: 50px">
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            style="display:flex;flex-direction:column;align-items: center;"
            @select="handleMenuSelect"
        >
          <el-menu-item index="1">
            <span>我的文章</span>
          </el-menu-item>
          <el-menu-item index="2">
            <span>我的草稿</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span>仙豆账单</span>
          </el-menu-item>
          <el-menu-item index="4">
            <span>登录记录</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 使用动态组件来根据 activeIndex 显示不同内容 -->
        <component :is="currentComponent"></component>
      </el-main>
    </el-container>
    <Footer/>
  </el-container>
</template>

<script setup>
import {watch, ref, shallowRef, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {useUserinfo} from '@/components/hooks/useUserinfo'
import Avatar from '@/components/Avatar/Avatar.vue'
import Footer from '@/components/Footer/Footer.vue'
import ArticleListPage from '@/components/Page/ArticleListPage.vue'
import DraftListPage from '@/components/Page/DraftListPage.vue'
import BeanBillPage from '@/components/Page/BeanBillPage.vue'
import LoginRecordPage from '@/components/Page/LoginRecordPage.vue'

const router = useRouter()
const {userinfo} = useUserinfo()


// 初始化当前组件
const activeIndex = ref('1') // 与默认激活的菜单项对应
const currentComponent = shallowRef(ArticleListPage)

// 根据 activeIndex 动态设置要渲染的组件
watch(activeIndex, (newIndex) => {
  if (newIndex === '1') {
    currentComponent.value = ArticleListPage
  } else if (newIndex === '2') {
    currentComponent.value = DraftListPage
  } else if (newIndex === '3') {
    currentComponent.value = BeanBillPage
  } else if (newIndex === '4') {
    currentComponent.value = LoginRecordPage
  }
})

// 菜单项选择事件处理
const handleMenuSelect = (index) => {
  activeIndex.value = index
}

// 跳转到主页
const gotoHomePage = () => {
  router.push('/home')
}

// 跳转发布文章页面
const goToAddArticlePage = () => {
  router.push('/goToAddArticlePage')
}

// 跳转新闻页面
const goToNewsPage = () => {
  router.push('/goToNewsPage')
}

onMounted(() => {

})
</script>


<style scoped>

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}


.top-bar {
  text-align: center;
}


</style>
